<template>
  <div class="data-collection-view">


    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{
        current: pagination.current,
        total: pagination.total,
        pageSize: pagination.pageSize,
        showSizeChanger: false,
        onChange: handlePageChange,
      }"
        :loading="tableLoading"
        row-key="forum_id"
        bordered
        style="margin-top: 20px"
    >
      <template #avatar="{ text }">
        <img
            v-if="text"
            :src="text"
            alt="avatar"
            style="width: 50px; height: 50px; border-radius: 50%;"
        />
        <span v-else>无</span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted} from "vue";
import {message} from "ant-design-vue";
import {triggerSpider, getForumsPaginated} from "@/api/postbar.ts";

export default defineComponent({
  name: "DataCollectionView",
  setup() {
    const loading = ref(false); // 采集按钮加载状态
    const tableLoading = ref(false); // 表格加载状态
    const data = ref([]); // 表格数据
    const pagination = ref({
      current: 1, // 当前页码
      total: 0, // 总数据条数
      pageSize: 10, // 每页显示条数
    });

    // 定义表格列
    const columns = [
      {
        title: "ID",
        dataIndex: "forum_id",
        key: "forum_id",
        align: "center",
      },
      {
        title: "名称",
        dataIndex: "forum_name",
        key: "forum_name",
        align: "center",
      },
      {
        title: "头像",
        dataIndex: "avatar",
        key: "avatar",
        align: "center",
        slots: {customRender: "avatar"}, // 声明插槽
      },
      {
        title: "帖子数",
        dataIndex: "thread_count",
        key: "thread_count",
        align: "center",
      },
      {
        title: "成员数",
        dataIndex: "member_count",
        key: "member_count",
        align: "center",
      },
      {
        title: "创建时间",
        dataIndex: "created_at",
        key: "created_at",
        align: "center",
      },
    ];

    // 采集数据
    const startCollection = async () => {
      loading.value = true;
      try {
        await triggerSpider();
        message.success("数据采集成功！");
        fetchData(); // 采集完成后加载数据
      } catch (error) {
        message.error("采集失败，请稍后重试！");
      } finally {
        loading.value = false;
      }
    };

    // 分页数据获取
    const fetchData = async () => {
      tableLoading.value = true;
      try {
        const response = await getForumsPaginated(
            pagination.value.current,
            pagination.value.pageSize
        );
        data.value = response.data.map((item: any) => ({
          ...item,
          key: item.forum_id,
        }));
        pagination.value.total = response.total; // 更新总数据条数
      } catch (error) {
        message.error("加载数据失败！");
      } finally {
        tableLoading.value = false;
      }
    };

    // 分页切换
    const handlePageChange = (page: number) => {
      pagination.value.current = page;
      fetchData();
    };

    // 页面加载时获取数据
    onMounted(() => {
      fetchData();
    });

    return {
      loading,
      tableLoading,
      data,
      columns,
      pagination,
      startCollection,
      handlePageChange,
    };
  },
});
</script>

<style scoped>
.data-collection-view {
  padding: 20px;
}

.actions {
  margin-bottom: 20px;
}

a-button {
  margin-left: 0;
}
</style>
